<template>
    <div style="width: 100%;height: 85%;padding:15px" class="myBackSystem">
        <div style="width: 100%;height:7.5%;margin-top: 10px">
            <el-menu  class="el-menu-demo"
                      mode="horizontal"
                      :default-active="activeIndex"
                      style="border-radius: 20px;margin: 0 auto;display: flex;justify-content: center;width: 40%;opacity: 0.9;"
                      background-color="white"
                      active-text-color="black"
                      @select="getIndex"
            >
                <el-menu-item index="1" style="border-radius: 20px 0 0 20px"><span class="el-icon-sort"></span>库存列表</el-menu-item>
                <el-menu-item index="2" ><span class="el-icon-document-copy"></span>订单管理</el-menu-item>
                <el-menu-item index="3" style="border-radius: 0 20px 20px 0"><span class="el-icon-star-off"></span>广告位</el-menu-item>
            </el-menu>
        </div>

        <div style="width: 100%;height: 90%">
            <Drinks v-if="activeIndex==='1'"></Drinks>
            <Orders v-if="activeIndex==='2'"></Orders>
            <Hot v-if="activeIndex==='3'"></Hot>
        </div>

    </div>
</template>

<script>
    import Drinks from "../components/admin/Drinks";
    import Orders from "../components/admin/Orders";
    import Hot from "../components/admin/Hot";
    export default {
        name: "Inventory",
        components: {Hot, Orders, Drinks},
        data(){
            return{
                activeIndex:'1',
                activeName: 'first'
            }
        },
        methods:{
            getIndex(index){
                this.activeIndex = index
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>

<style scoped>

</style>